@import './base.less';

@rem:10rem;

.detailbox{
	margin-bottom: 62px;
}
.contentbox{
	background: #fff;
}

.imgbox {
	position: relative;
}
.headerbox {
	height: 44px;
	position: absolute;
	width: 100%;
	display: flex;
	justify-content: space-between;
	z-index: 2;
}

.imgbox .bgarea{
    color: #fff;
    font-size: 22px;
    letter-spacing: 0;
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 100%;
}

.imgbox .bgarea .title{
	margin: 74px 20px 0px;
	display: flex;
}

.imgbox .bgarea .title div{
	margin:0px auto;
	line-height: 46px;
	padding: 0px 20px;
	box-sizing: border-box;
	display: inline-block;
	background: #000;
}

.headerbox .back{
	padding: 12px 15px;
	background: #cbdae4;
}

.headerbox .more{
	padding: 12px 15px;
	background: #7f8284;
}

.maximg{
	height: 154px;
	width: 100%;
	background: #0094ff;
    border: none;
}

.description{
	padding: 10px 15px 0px;
	font-size: 14px;
	color: #111111;
	letter-spacing: 0;
	line-height: 21px;
	text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tagbox{
	padding: 5px 15px;
	border-bottom:1px solid #E1E1E1;
}

.tagbox .item{
	display: inline-block;
	padding: 5px 10px;
	font-size: 12px;
	color: #C1862D;
	border:1px solid #D2A156;
	border-radius: 4px;
}

.constitutebox{
	margin: 10px 15px;
}

.constitutebox .item{
	display: flex;
	justify-content: flex-start;
}

.constitutebox .item .ingredient{
	font-size: 14px;
	color: #111111;
	letter-spacing: 0;
	line-height: 21px;
	width: 42px;
}

.constitutebox .item .text{
	flex: 1;
	font-size: 14px;
	color: #777777;
	letter-spacing: 0;
	line-height: 21px;
	word-wrap:break-word;
}

.newsbox{
	margin-top:10px; 
	padding-left: 15px;
	background: #fff;
}

.newsbox .head{
	display: flex;
	padding: 10px 15px 10px 0px;
	justify-content: space-between;
	border-bottom: 1px solid #e1e1e1;
	align-items: center;
}

.newsbox .head .info{
	font-size: 15px;
	color: #111111;
}

.newsbox .head .count{
	font-size: 12px;
	color: #777777;
}

.newsbox .newscontent{
	display: flex;
	padding: 10px 15px 10px 0px;
}

.newscontent .content{
	flex: 1;
	display: flex;
	flex-direction:column;
	justify-content: space-between;
	padding-right: 15px;
}

.newscontent .newsimg{
	width: 85px;
	height: 85px;
	background: #0094ff;
}

.newscontent .title{
	font-size: 15px;
	color: #111111;
	text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.newscontent .tag{
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: #777777;
}

.talkbox{
	margin-top:10px; 
	padding-left: 15px;
	background: #fff;
}

.talkbox .title{
	padding: 10px 15px 10px 0px;
	overflow: hidden;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	white-space: nowrap;
	text-overflow: ellipsis;
	border-bottom: 1px solid #e1e1e1;
}

.talkbox .showcount{
	padding: 15px 15px 15px 0px;
	display: flex;
	display: -webkit-box;
	justify-content: space-between;
}

.talkbox .showcount .countarea{
	flex: 1;
	-webkit-box-flex: 1;
	margin: 0px 15px;
}

.talkbox .showcount .redarea,.talkbox .showcount .bluearea{
	width: 38px;
}

.talkbox .talkcontent .selecttag{
	margin-bottom: 8px;
}

.talkbox .talkcontent .selecttag .selecttext{
	background: #3E7DD2;
	border-radius: 1px;
	display: inline-block;
	padding: 1px 5px;
	color: #fff;
}

.talkbox .content .option{
	margin: 10px 0px;
	color: #666;
	display: flex;
}

.talkbox .content .option .btnlike{
	flex: 1;
	text-align: right;
}

.redarea .text,.bluearea .text{
	text-align: center;
	font-size: 12px;
}
.redarea .text{
	color: #E1391F;
}
.bluearea .text{
	color: #3E7DD2;
}
.redarea .circle,.bluearea .circle{
	width: 36px;
	height: 36px;
	border-radius: 19px;
	border: 1px solid #E1E1E1;
	box-shadow: 0px 1px 4px 0px rgba(175,175,175,0.50);
}

.redarea .circle{
	background: url('../img/redpraise@2x.png') center;
	background-size:20px 20px; 
	background-repeat: no-repeat;
}

.bluearea .circle{
	background: url('../img/bluepraise@2x.png') center;
	background-size:20px 20px; 
	background-repeat: no-repeat;
}

.talkbox .showcount .countarea .countinfo{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}
.countinfo .redtext,.countinfo .bluetext{
	flex: 1;
	font-size: 16px;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.countinfo .redtext{
	color: #C52A11;
	text-align: left;
}

.countinfo .bluetext{
	color: #2663B4;
	text-align: right;
}

.countinfo .redletter{
	font-size: 24px;
	color: #C52A11;
}

.countinfo .blueletter{
	font-size: 24px;
	color: #2663B4;
}

.countinfo .ctr{
	width: 40px;
}

.countarea  .countnumber{
	position: relative;
	height: 18px;
	line-height: 18px;
    overflow: hidden;
}

.countnumber .numberleft{
	position: absolute;
	display: inline-block;
	left: 0;
	top: 0;
}

.countnumber .numberright{
	position: absolute;
	display: inline-block;
	right: 0;
	top: 0;
}

.countnumber .redlenght{
	width: 57%;
	height: 18px;
	float: left;
    display: inline-block;
    background: -webkit-gradient(linear,0 0,100% 0,from(#d2140c),to(#fe664e));
    background-image: -webkit-linear-gradient(right,#fe664e,#d2140c);
    background-image: linear-gradient(-90deg,#fe664e,#d2140c);
    margin-left: -7px;
    -webkit-transform: skew(-50deg,0deg);
    transform: skew(-40deg,0deg);
}

.countnumber .bluelenght{
    width: 43%;
    height: 18px;
    float: right;
    background: -webkit-gradient(linear,0 0,100% 0,from(#e7e7e7),to(#d7d7d7));
    background-image: -webkit-linear-gradient(right,#d7d7d7,#e7e7e7);
    background-image: linear-gradient(-90deg,#d7d7d7,#e7e7e7);
    display: inline-block;
    margin-right: -7px;
    -webkit-transform: skew(-50deg,0deg);
    transform: skew(-40deg,0deg);
}


.vonderbox,.neareststorebox,.commentbox{
	margin-top:10px; 
	background: #fff;
	padding-left: 15px;
}

.vonderbox .title,.neareststorebox .title{
	padding: 10px 15px 10px 0px;
	font-size: 15px;
	color: #111111;
}

.vonderbox  .vonderinfo{
	list-style: none;
}

.vonderbox  .vonderinfo .item{
	height: 32px;
	line-height: 32px;
	margin-bottom: 10px;
	padding-right: 15px;
	display: flex;
	justify-content: space-between;
	position: relative;
}


.vonderbox  .vonderinfo .item .colorbg{
	position: absolute;
	height: 100%;
	width: 69%;
	top:0;
	left: 0;
	background:rgba(229, 191, 134, 0.15);
	z-index: 0;
}

.vonderbox  .vonderinfo .vondername .vondertop1{background: url('../img/TOP.1@2x.png');}
.vonderbox  .vonderinfo .vondername .vondertop2{background: url('../img/TOP.2@2x.png');}
.vonderbox  .vonderinfo .vondername .vondertop3{background: url('../img/TOP.3@2x.png');}
.vonderbox  .vonderinfo .vondername .vondertop4{background: url('../img/TOP.4@2x.png');}
.vonderbox  .vonderinfo .vondername .vondertop5{background: url('../img/TOP.5@2x.png');}

.vonderbox  .vonderinfo .vondername .vondertop1,
.vonderbox  .vonderinfo .vondername .vondertop2,
.vonderbox  .vonderinfo .vondername .vondertop3,
.vonderbox  .vonderinfo .vondername .vondertop4,
.vonderbox  .vonderinfo .vondername .vondertop5{
	vertical-align: middle;
	margin: 0 10px;
	width: 38px;
	height: 15px;
	display: inline-block;
	background-size: 38px 15px;
	background-repeat:no-repeat;
}
.vonderbox  .vonderinfo .item .vondername{
	z-index: 1;
}

.vonderbox  .vonderinfo .item  .popularity{
	z-index: 1;
}

.vonderbox  .infocount{
	border-top: 1px solid #e1e1e1;
	padding: 10px 15px 10px 0px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.vonderbox  .infocount .text{
	font-size: 15px;
	color: #111111;
}

.vonderbox  .infocount .arrows{
	
}

.neareststorebox .storelist{
	list-style: none;
	white-space: nowrap;
}
.neareststorebox .storelist .item{
	display: inline-block;
	width: 160px;
	height: 158px;
	margin-right: 10px;
	background: linear-gradient(0,#e1e1e1,#e1e1e1 50%,transparent 0) 100% 0/100% 1px no-repeat,linear-gradient(0,#e1e1e1,#e1e1e1 50%,transparent 0) 100% 100%/100% 1px no-repeat,linear-gradient(90deg,#e1e1e1,#e1e1e1 50%,transparent 0) 100% 0/1px 100% no-repeat,linear-gradient(90deg,#e1e1e1,#e1e1e1 50%,transparent 0) 0 0/1px 100% no-repeat;
}

.neareststorebox .storelist .content{
	padding: 8px 10px;
}

.neareststorebox .iscrolbox{
    position: relative;
    overflow: hidden;
    background: #fff;
    height: 168px;
}

.neareststorebox .iscrolbox .wrapper{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    bottom: 0;
    overflow: hidden;
}

.neareststorebox .storelist .item .imgeare{
	width: 100%;
	height: 80px;
	background: #ebeef1;
}

.neareststorebox .storelist .content .name{
	
}

.neareststorebox .storelist .content .location{
	font-size: 12px;
	color: #777777;
}

.neareststorebox .storelist .content .recommend{

}


.commentbox .title{
	padding: 10px 15px 10px 0px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.commentbox .title .text{
	font-size: 15px;
	color: #111111;
}
.commentbox .title .text .count{
	color: #000000;
}

.commentbox .commentlist .item,.talkbox .talkcontent{
	border-top: 1px solid #e1e1e1;
	display: flex;
}

.commentbox .commentlist .item .userarea,.talkbox .talkcontent .userarea{
	width: 50px;
	height: 50px;
	padding-top: 12px;
	padding-right: 8px; 
}

.commentbox .commentlist .item .userarea .userimg,.talkbox .talkcontent .userarea .userimg{
	width: 50px;
	height: 50px;
	border-radius: 25px; 
	background: #0094ff;
}

.commentbox .commentlist .item  .content,.talkbox .talkcontent .content{
	flex: 1;
	padding-right: 15px;
}

.commentbox .commentlist .item  .content .text,.talkbox .talkcontent .content .text{
	font-size: 14px;
	color: #333333;
	letter-spacing: 0.4px;
	line-height: 21px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.commentbox .commentlist .item  .content .userinfo,.talkbox .talkcontent .content .userinfo{
	display: flex;
	justify-content: space-between;
	padding:12px 0px 8px; 
}

.commentbox .userinfo .name,.talkbox .talkcontent .userinfo .name{
	font-size: 15px;
	color: #466889;
}

.commentbox .userinfo .date,.talkbox .talkcontent .userinfo .date{
	font-size: 12px;
	color: #999999;
}

.commentbox .commentlist .item  .content .oneimg{
	margin-top: 10px;
	width: 166px;
	height: 166px;
	background: #0094ff;
}


.commentbox .commentlist .item  .content .storeinfo{
	display: flex;
	background: #F6F6F6;
	border-radius: 1px;
}

.commentbox .commentlist .storeinfo .img{
	width: 45px;
	height: 45px;
	margin: 8px;
	background: #0094ff;
}
.commentbox .commentlist .content .imglist{
	margin-top:10px; 
}
.commentbox .commentlist .content .imglist .imgbox{
	font-size: 0;
	width: 32%;
	height: 70px;
	padding: 0 3px;
	box-sizing: border-box;
	display: inline-block;
	background: #0094ff;
}

.commentbox .commentlist .storeinfo .info{
	flex: 1;	
	padding: 10px 10px 10px 0px;
}

.commentbox .commentlist .storeinfo .shopname{
	display: flex;
	justify-content: space-between;
	color: #333;
}

.commentbox .commentlist .storeinfo .shopname .name{
	flex: 1;
	font-size: 14px;
}

.commentbox .commentlist .storeinfo .shopname .price{
   color: #999;
}
.commentbox .commentlist .storeinfo  .location{
	display: flex;
	justify-content: space-between;
	color: #999;
}

.commentbox .content .option{
	margin: 10px 0px;
	text-align: right;
	color: #666;
}

.content .option .praisebtn,.content .option .commentbtn
{
	width: 70px;
	height: 22px;
	line-height: 25px;
	display: inline-block;
	border: 1px solid #C8C8C8;
	text-align: center;
	border-radius: 55px;
	margin-left: 6px;
}

.content .option .praiseicon{
	width: 15px;
	height: 14px;
	background: url('../img/youyong.png') center;
	background-size:15px 14px;
	display: inline-block;
	vertical-align: middle;
}

.content .option .commenticon{
	width: 14px;
	height: 15px;
	background: url('../img/pinglun.png') center;
	background-size:14px 15px;
	display: inline-block;
    vertical-align: middle;
}

.commentbox .topline{
	border-top: 1px solid #e1e1e1;
}

.bottombarbox{
	background: #fff;
	position: fixed;
	bottom: 0;
	left: 0;
	height: 32px;
	width: 100%;
	padding: 10px 0px;
	z-index: 10;
	display: flex;
	border-top: 1px solid #e1e1e1;
}

.bottombarbox .upimg,.bottombarbox .writetext{
	flex: 1;
	height: 100%;
	text-align: center;
	line-height: 32px;
}

.bottombarbox .writetext{
	border-left: 1px solid #e1e1e1;
}

.bottombarbox .upimg .imgicon{
	width: 24px;
	height:22px;
	background: url('../img/chuantu@2x.png') center;
	background-size:24px 22px; 
}

.bottombarbox .writetext .writeicon{
	width: 25px;
	height:25px;
	background: url('../img/writeicon@2x.png') center;
	background-size:25px 25px; 
}

.bottombarbox .upimg .imgicon,.bottombarbox .writetext .writeicon{
	display: inline-block;
	background-repeat: no-repeat;
	vertical-align: middle;
}

.count .arrows,.infocount .arrows,.commentbox .title .arrows{
	border-top: 2px solid #bbb;
	border-right: 2px solid #bbb;
	display:inline-block;
    height: 8px;
    width: 8px;
	transform: rotate(45deg);
}

.oneellipsis{
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}



